<template>
  <div class="panel column">
    <div class="tab">
      <div
        class="account"
        :class="{ active: tabStatus === 'account' }"
        @click="tabStatus = 'account'"
      >
        账号登录
      </div>
      <div
        class="sms"
        :class="{ active: tabStatus === 'sms' }"
        @click="tabStatus = 'sms'"
      >
        验证码登录
      </div>
      <div
        class="active-line"
        :style="{
          transform:
            tabStatus === 'account' ? 'translate(-60%)' : 'translate(200%)'
        }"
      ></div>
    </div>
    <div class="content column">
      <Account
        v-if="tabStatus === 'account'"
        :isWarn="isWarn"
        v-model:user-name="loginForm.userName"
        v-model:password="loginForm.password"
      />
      <Sms
        v-if="tabStatus === 'sms'"
        :isWarn="isWarn"
        v-model:phone-number="loginForm.phoneNumber"
        v-model:verify-code="loginForm.verifyCode"
      />

      <el-button class="login-btn" @click="checkLogin" :loading="isLoading"
        >登录</el-button
      >
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import { login, codeLogin } from '@/apis'
import { useAuthStore } from '@/stores'
import Account from './Account.vue'
import Sms from './Sms.vue'

const tabStatus = ref('account')
const isWarn = ref(false)
const isLoading = ref(false)

const loginForm = reactive({
  userName: '',
  password: '',
  phoneNumber: '',
  verifyCode: ''
})

const authStore = useAuthStore()
const { handleLoginInfo } = authStore

const checkLogin = () => {
  if (tabStatus.value === 'account') {
    toLogin()
  } else if (tabStatus.value === 'sms') {
    toCodeLogin()
  }
}

// 验证码登录
const toCodeLogin = async () => {
  if (!loginForm.phoneNumber) {
    ElMessage.error('请输入手机号')
  } else if (!loginForm.verifyCode) {
    ElMessage.error('请输入验证码')
  } else if (!/^1[3456789]\d{9}$/.test(loginForm.phoneNumber)) {
    ElMessage.error('手机号格式错误，请检查！')
  } else {
    isLoading.value = true
    const { F_responseNo, F_responseMsg, F_data } = await codeLogin({
      phone: loginForm.phoneNumber,
      code: loginForm.verifyCode,
      userType: 2,
      platform: 101
    })
    isLoading.value = false
    if (F_responseNo === 10000) {
      handleLoginInfo(F_data)
    } else {
      ElMessage.error(F_responseMsg || '登录失败！')
    }
  }
}

// 账号密码登录
const toLogin = async () => {
  if (!loginForm.userName || !loginForm.password) {
    ElMessage.error(!loginForm.userName ? '请输入用户名' : '请输入密码')
    return
  }

  isLoading.value = true
  try {
    const res = await login({
      username: loginForm.userName.trim(),
      password: loginForm.password.trim(),
      userType: 2,
      platform: 101
    })

    if (res.F_responseNo !== 10000) {
      throw new Error(res.F_responseMsg || '账号或密码不正确')
    }
    handleLoginInfo(res.F_data)
  } catch (error) {
    ElMessage.error(error.message)
  } finally {
    isLoading.value = false
  }
}

const onEnterKey = event => {
  if (event.key === 'Enter') {
    checkLogin()
  }
}

onMounted(() => window.addEventListener('keydown', onEnterKey))
onBeforeUnmount(() => window.removeEventListener('keydown', onEnterKey))
</script>
<style lang="less" scoped>
@import '../css/login.less';

.panel {
  box-sizing: border-box;
  width: 520px;
  height: 600px;
  border-radius: 25px;
  padding: 60px;
  background: rgb(255 255 255 / 0.75);
  box-shadow: 0px 4px 16.1px 3px rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(20px);
  justify-content: space-between;
  gap: 52px;

  .tab {
    display: flex;
    gap: 52px;
    font-size: 24px;
    font-weight: 700;

    .account,
    .sms {
      position: relative;
      color: rgb(0 0 0 / 0.4);
      cursor: pointer;
      transition: color 0.3s;
    }

    .active {
      color: @color-brand-regular;

      &::after {
        content: '';
        bottom: -16px;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        width: 60px;
        height: 8px;
        background: url('@/assets/images/login/active-line.svg') no-repeat
          center;
        background-size: contain;
      }
    }
  }

  .content {
    flex: 1;
    justify-content: space-between;
    overflow: hidden;
    width: 100%;

    :deep(.el-input__wrapper) {
      background-color: transparent;
    }

    .login-btn {
      width: 100%;
      height: 64px;
      line-height: 64px;
      border-radius: 20px;
      background: linear-gradient(
        90deg,
        #66c5ff 0%,
        #58b1ff 50.83%,
        #4492ff 100%
      );
      font-weight: 900;
      font-size: 24px;
      color: #fff;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>
